<!doctype html>
<html lang="en" xmlns:th=http://www.thymeleaf.org>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Signin Template for Bootstrap</title>


    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <link th:href="@{/css/signin.css}" rel="stylesheet">
    <script src="https://ssl.captcha.qq.com/TCaptcha.js"></script>
    <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
</head>

<body class="text-center">
<form class="form-signin"  th:action="@{/login}" th:method="post" th:id="aa">
    <img class="mb-4" th:src="@{/img/bootstrap-solid.svg}" alt="" width="72" height="72">
    <h1 class="h3 mb-3 font-weight-normal" >请登录</h1>
    <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"></p>
    <input type="username" name="username" id="inputUsername" class="form-control" th:placeholder="用户名" required autofocus>
    <input type="password" name="password" id="inputPassword" class="form-control" th:placeholder="密码" required>
    <button id="TencentCaptcha" data-appid="2064699032" data-cbfn="callbackName" data-biz-state="data-biz-state"
            class="btn btn-lg btn-primary btn-block" type="button">登录</button>
    <p class="mt-5 mb-3 text-muted">&copy; 2020-2021</p>
</form>

<script>
    window.callbackName = function (res) {
        // 返回结果
        // ret         Int       验证结果，0：验证成功。2：用户主动关闭验证码。
        // ticket      String    验证成功的票据，当且仅当 ret = 0 时 ticket 有值。
        // CaptchaAppId       String    验证码应用ID。
        // bizState    Any       自定义透传参数。
        // randstr     String    本次验证的随机串，请求后台接口时需带上。

        // res（用户主动关闭验证码）= {ret: 2, ticket: null}
        // res（验证成功） = {ret: 0, ticket: "String", randstr: "String"}
        if (res.ret === 0)
        $.ajax({
                type: "POST",
                url: "/api/check",
                data: {
                    "ticket":res.ticket,
                    "randstr":res.randstr
                },
                success: function (data) {
                    if (data == 1) {
                        into();//验证成功，登录验证
                    }else{
                        alert("验证失败，请重新验证！");
                    }
                }
            });
    }
    function into() {
        document.getElementById("aa").submit();
    }
    // alert('1. 返回结果（randstr、ticket）已复制到剪切板，ctrl+v 查看。\n2. 打开浏览器控制台，查看完整返回结果。');
    // alert(res.ticket)
</script>
</body>
</html>